<template>
  <div>
    <h4>理赔信息</h4>
    <Table :columns="columns" :data="tableData" :loading="isLoading" style="margin-top:10px">
      <!-- 理赔结论 -->
      <template slot-scope="{ row }" slot="clmConlusion">
        <div v-for="(item, index) in clmConlusionArr" :key="index">
          <span v-if="item.value == row.clmConlusion || item.name == row.clmConlusion">{{item.name}}</span>
        </div>
      </template>
      <!-- 事故类型 -->
      <template slot-scope="{ row }" slot="reasonCode">
        <div v-for="(item, index) in reasonCodeArr" :key="index">
          <span v-if="item.value == row.reasonCode || item.name == row.reasonCode">{{item.name}}</span>
        </div>
      </template>
      <!-- 案件状态 -->
      <template slot-scope="{ row }" slot="clmState">
        <div v-for="(item, index) in clmStateArr" :key="index">
          <span v-if="item.value == row.clmState || item.name == row.clmState">{{item.name}}</span>
        </div>
        <!-- <span v-if="row.clmState == '已结案支付中'" class="clmState ed-ing">已结案支付中</span>
        <span v-if="row.clmState == '已支付'" class="clmState ed">已支付</span>
        <span v-if="row.clmState == '处理中'" class="clmState ing">处理中</span> -->
      </template>
    </Table>
    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.pageIndex" :page-size="ipagination.pageSize"
      transfer></Page>
  </div>
</template>

<script>
import { loadResourcesMixin } from "../../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../../util/mixins/tableChangeMixin";
export default {
  name: "payoutInfo",
  mixins: [loadResourcesMixin, tableChangeMixin],
  data() {
    return {
      mixinData: {
        tableAxios: "selectClaimValue",
      },
      // 理赔结论
      clmConlusionArr: [
        { value: "0", name: "全额给付" },
        { value: "1", name: "全部拒付" },
        { value: "2", name: "协议给付" },
        { value: "3", name: "通融给付" },
        { value: "4", name: "部分给付" },
        { value: "5", name: "短期给付" },
        { value: "6", name: "公司撤案" },
        { value: "5", name: "客户撤案" },
        { value: "8", name: "退回修改" },
      ],
      // 事故类型
      reasonCodeArr: [
        { value: "00", name: "医疗" },
        { value: "01", name: "伤残" },
        { value: "02", name: "身故" },
        { value: "03", name: "高残" },
        { value: "04", name: "重疾" },
        { value: "05", name: "特种疾病" },
        { value: "08", name: "恶性肿瘤陪护" },
        { value: "09", name: "豁免" },
      ],
      // 案件状态
      clmStateArr: [
        { value: "10", name: "报案" },
        { value: "20", name: "立案" },
        { value: "30", name: "审核" },
        { value: "40", name: "审批" },
        { value: "50", name: "结案" },
        { value: "60", name: "完成" },
        { value: "70", name: "关闭" },
      ],
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
        },
        {
          title: "立案号",
          key: "clmNo",
          align: "center",
        },
        {
          title: "理赔金",
          key: "realPay",
          align: "center",
        },
        {
          title: "出险人",
          key: "customerName",
          align: "center",
        },
        {
          title: "事故类型",
          slot: "reasonCode",
          align: "center",
        },
        {
          title: "产品名称",
          key: "claimRiskName",
          align: "center",
        },
        {
          title: "申请日",
          key: "applyDate",
          align: "center",
        },
        {
          title: "结案日",
          key: "endCaseDate",
          align: "center",
        },
        {
          title: "理赔结论",
          slot: "clmConlusion",
          align: "center",
        },
        {
          title: "案件状态",
          slot: "clmState",
          align: "center",
          width: "140",
        },
        // {
        //   title: "操作",
        //   type: "expand",
        //   align: "center",
        //   render: (h, { row }) => {
        //     return (
        //       <div>
        //         <div class="ivu-row">
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">申请人姓名：</span>
        //             <span>张三</span>
        //           </div>
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">申请日期：</span>
        //             <span>12022-02-23</span>
        //           </div>
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">申请类型：</span>
        //             <span>医疗费用补偿</span>
        //           </div>
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">出险人/被保人：</span>
        //             <span>张三</span>
        //           </div>
        //         </div>

        //         <div class="ivu-row">
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">事故发生/疾病首发确认日：</span>
        //             <span>2022-02-23</span>
        //           </div>
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">事故地点：</span>
        //             <span>江苏省无锡市</span>
        //           </div>
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">事故原因/疾病诊断：</span>
        //             <span>车祸</span>
        //           </div>
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">案件状态：</span>
        //             <span>已结案支付中</span>
        //           </div>
        //         </div>

        //         <div class="ivu-row">
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">结案日期：</span>
        //             <span>2022-02-23</span>
        //           </div>
        //           <div class="ivu-col ivu-col-span-6">
        //             <span class="label-span">赔付金额：</span>
        //             <span>3002.32</span>
        //           </div>
        //         </div>
        //       </div>
        //     );
        //   },
        // },
        // {
        //   title: "操作",
        //   key: "",
        //   align: "center",
        // },
      ],
    };
  },
  created() {
    this.form.contNo = this.$route.query.contNo;
  },
  methods: {
    tableThen(res) {
      this.tableData = res.data;
      this.ipagination.total = +res.data[0].total;
    },
  },
};
</script>
<style scoped>
.clmState {
  padding: 10px;
}
.ed-ing {
  color: #ff4722;
  background: #ffe2dc;
}
.ed {
  background: rgba(20, 213, 149, 0.15);
  color: #14d595;
}
.ing {
  background: #ffe2dc;
  color: #ff4722;
}
</style>
<style>
/* <style scoped> */
.label-span {
  color: #1d1d1d;
}
.page >>> .ivu-row {
  margin-top: 20px;
}
</style>
